<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="组织架构">
            <!-- 具体页面结构 -->
            <el-tab-pane label="用户管理" name="first">组织架构</el-tab-pane>
            <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
              <el-col :span="20">
                <svg-icon icon-class="home" />
                <span>江苏传智播客教育科技股份有限公司</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>负责人</el-col>
                  <!-- 下拉菜单 element -->
                  <el-col>
                    <el-dropdown>
                      <span>
                        操作<i class="el-icon-arrow-down" />
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>添加子部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <!-- 下面的结构 -->
            <el-tree
              :data="list"
              :props="defaultProps"
              :default-expand-all="true"
            >
              <!-- default-expand-all="true" 为true是树状结构默认展开 -->
              <template slot-scope="{ node, data }">
                <el-row
                  type="flex"
                  justify="space-between"
                  align="middle"
                  style="height: 40px; width: 100%;"
                >
                  <el-col :span="20">
                    <span>{{ data.name }}</span>
                  </el-col>
                  <el-col :span="4">
                    <el-row type="flex" justify="end">
                      <!-- 两个内容 -->
                      <el-col>{{ data.manager }}</el-col>
                      <el-col>
                        <!-- 下拉菜单 element -->
                        <el-dropdown>
                          <span> 操作<i class="el-icon-arrow-down" /> </span>
                          <!-- 下拉菜单 -->
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="addFn(data.id)">添加子部门</el-dropdown-item>
                            <el-dropdown-item @click.native="editFn(data.id)">编辑部门</el-dropdown-item>
                            <el-dropdown-item @click.native="delFn(data.id)">删除部门</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </template>
            </el-tree>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- 弹窗 -->
      <el-dialog :title="isEdit? '编辑':'添加'" :visible.sync="showDialog">
        <AddorEdit
          v-if="showDialog"
          :pid="curId"
          :is-edit="isEdit"
          :existed-code-list="existedCodeList"
          :c-existed-name="cExistedName"
          @updateDepart="updateDepartFn"
          @off="offFn"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { departmentsAPI, delDepartmentAPI } from '@/api/departments'
import { NewListToTreeData } from '@/utils/index'
import AddorEdit from './AddorEdit'
export default {
  components: {
    AddorEdit
  },
  data() {
    return {
      // 控制弹窗是编辑还是新增
      isEdit: false,
      // 控制子组件的显示和隐藏
      curId: '',
      showDialog: false,
      // 修改默认的配置
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      list: [],
      // 1. 保存code的数组
      existedCodeList: [],
      // 保存部门名称的数组
      originList: []
    }
  },
  computed: {
    // 当前已经被占用的名字,再次添加的时候,就不能用了
    cExistedName() {
      let curpId = this.curId
      if (this.isEdit) {
        const newId = this.originList.find(item => item.id === this.curId)
        curpId = newId.pid
      }
      return this.originList.filter(item => item.pid === curpId).map(item => item.name)
      // if (this.isEdit) {
      //   // 找到当前被点击元素的同级部门的名字
      //   // 当前被点击的id:  this.curId
      //   初始数据数组是： this.originList
      //   // 1. 找pid
      //   const parent = this.originList.find(item => item.id === this.curId)
      //   const pid = parent.pid
      //   // 2. 根据pid做筛选 找到同级部门名
      //  return this.originList.filter(item => item.pid === pid).map(item => item.name)
      // } else {
      //   // 根据当前的id,去找它的下级的部门的name
      //   // this.originList = [{id, pid, name}]
      //   return this.originList.filter(item => item.pid === this.curId).map(item => item.name)
      // }
    }
  },
  created() {
    this.DepartmentsFn()
  },
  methods: {
    async DepartmentsFn() {
      // 获取部门的信息
      const res = await departmentsAPI()
      console.log('部门信息是', res)
      // 2 把请求回来的数据用map方法,保存到existedCodeList中----------code的数组
      this.existedCodeList = res.depts.map(item => item.code)
      // 把数据中要用的数据存入到originList这个数组中
      this.originList = res.depts.map(item => {
        return {
          id: item.id,
          pid: item.pid,
          name: item.name
        }
      })
      console.log(this.originList)

      // 把平铺的数组转化为树状数组
      const list = NewListToTreeData(res.depts)
      this.list = list
    },
    // 删除部门功能
    delFn(id) {
      // 点击删除按钮,出来提示框
      this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用接口删除相应的数据
        const res = await delDepartmentAPI(id)
        console.log(res)
        // 重新刷新页面
        this.DepartmentsFn()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 添加部门功能
    addFn(id) {
      // 点击添加,让弹框显示
      this.showDialog = true
      this.curId = id
      // 点击添加按钮,让弹窗变成添加状态
      this.isEdit = false
    },
    // 子组件点击确定按钮,关闭弹窗和刷新页面
    updateDepartFn() {
      // 关闭弹窗
      this.showDialog = false
      // 刷新页面
      this.DepartmentsFn()
    },
    // 编辑部门功能
    editFn(id) {
      this.showDialog = true
      // 给子组件传过去,判断是不是编辑
      this.isEdit = true
      this.curId = id
    },
    offFn() {
      // 点击取消,关闭弹窗
      this.showDialog = false
    }
  }
}
</script>

<style>

</style>

